<!--
 * @Descripttion: 资源阶段展示控件（步骤条steps）
 * @version: 
 * @Author: Jf W
 * @Date: 2021-08-04 13:16:31
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-17 11:36:57
-->
<template>
  <div class="steps">
    <el-steps
      :active="active"
      finish-status="success"
      align-center
    >  
      <template
        v-for="(item, index) in stepsArray"
        :key="index"
      >
        <el-step
          :title="item"
          class="step-item"
        />
      </template>
    </el-steps>

    <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from 'vue'
export default defineComponent({
  props: {
    stepsArray: {
      type: Array,
      default: () => [
        '创建线路',
        '保存产品信息',
        '保存行程设计',
        '保存预订须知',
        '创建完成'
      ]
    }
  },
  setup(props) {
    const active = ref(0)
    const methods = reactive({
      next() {
        if (active.value++ > props.stepsArray.length) active.value = 0;
      }
    })

    return {
      active,
      ...toRefs(methods)
    }
  }
})
</script>

<style lang="scss" scoped>
.steps {
  :deep .el-step__icon,.is-text {
    border-color: #D7D7D7;
  }
  
  :deep .el-step__icon-inner {
    display: none;
  }
  :deep .is-success {
    color: #02A7F0;
    font-size: 14px;
    .el-step__icon {
      background-color: #02A7F0;
    }
  }
  :deep .el-step__title {
    font-size: 14px;
    font-weight: 400;
  }
  :deep .el-step__icon {
    width: 20px;
    height: 20px;
  }
}
</style>
